gusucode.com > 同城苏州黄页系统php源码程序 > mod.js/复件 LinkMenu.js

    /*
#############################################
#
# 利用 xmlhttp 实现的无限级 联动菜单
#
# alee201@sina.com
#
#############################################

一共只有两个函数，一个全局变量。
假设页面里有多个联动菜单，
Initialize函数用于初始化  页面中各个联动菜单的 一级菜单，
getOption 函数用于在某一级菜单被选择时，装载他的下级菜单。
ServerURL 变量用于记录查询请求提交的地址。

*/


// ServerURL 在服务器端负责数据查询的程序的地址。所有查询请求将提交到该地址。
var ServerURL="/mod.php/link-query.php";


/*
函数 str2unicode
将字符串以转换成 unicode ，并插入分隔符。
*/
function str2unicode(str)
{
	var strRtn="";
	var separator="z";	//file:用z作分隔符

	for (var i=0;i<str.length;i++)
	{
		strRtn+=str.charCodeAt(i);
		if (i<str.length-1) strRtn+=separator;
	}
	return strRtn;
}

/*
函数 clearMenu

清空一个菜单
第一个参数是菜单
*/
function clearMenu(menu,startIndex)
{
	if(!startIndex)
		startIndex=1;
	
	for (index=menu.length-1;index>=startIndex;index--)
	{
		//alert("删除原菜单第"+(index+2)+"项");
		menu.options[index]=null;//删除下级菜单中原有的选项，前一次装载的数据需要清空		
	}	
}

function setSelected(menu,selectedValue)
{
	for(var idx=0;idx<menu.options.length;idx++)//装载新获取的数据到下级菜单
	{	
		if( selectedValue>0 && selectedValue == menu.options[idx].value )
			menu.options[idx].selected=true

	}
}


/*

函数 getOption

菜单选项的查询和装载
参数说明：
Parent		上级菜单（select 对象），
Select_name	所有下级菜单（数组，元素为 select 对象），数组中的第一个菜单，会根据 Parent 所选择的内容，被装载，其余的清空。
*/
function getOption(Parent,Selects,Table,field,queryURL,ifall)
{
	parent_option=Parent.selectedIndex;//上级菜单选中的项的序号
	theForm=Parent.form;
	parentKay=null;
	if(!Table)
		Table=Parent.item(parent_option).table;

	for(key=0;key<theForm.length;key++)
	{
		if( theForm[key]==Parent )
		{
			parentKay=key;
			break;
		}
		else
			continue;
	}								// 获得 Parent 在form中的key

	for(var key in Selects)
	{		
		if(typeof(Selects[key])=="object")
			continue;
		else if( (typeof(Selects[key])=="string") && (result=Selects[key].match(/^([\-\+])(\d)+$/)) )
		{
			if(result[1]=="+")
				curentKey=parentKay+eval(result[2]);
			else if(result[1]=="-")
				curentKey=parentKay-eval(result[2]);
			else
				return false;

			Selects[key]=theForm[curentKey];
		}
		else
			return false;
	}								//将全部“-2”类型的参数转换横实际对象
	
	
	Select=Selects[0];
	
	for(var key in Selects)
	{
		clearMenu(Selects[key]);
	}

	var Http = new ActiveXObject("Microsoft.XMLHTTP");//创建xmlhttp对象，用于收发数据到服务器短
	var Dom = new ActiveXObject("Microsoft.XMLDOM");//创建xmldom对象，用于分析、获取服务器段传回的xml中的数据
	
	if(queryURL)
		var url=queryURL;
	else
		var url=ServerURL;
	
	if(!ifall)
		ifall=0;

	if( field )
		url+="?value="+escape( str2unicode(Parent.item(parent_option).text) )+"&field="+field+"&"+"table="+Table+"&all="+ifall;
	else
		url+="?parent="+Parent.item(parent_option).parent+"*"+Parent.item(parent_option).value+"&"+"table="+Table+"&all="+ifall;
	//alert(url);
	//out.innerText+=url+"<br>";
	//document.write(url);
	Http.open("GET",url,false);
	Http.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");//如果需要 get/post 中文参数到服务器，必须出现次行，否则服务器端出现编码错误。
	Http.send();//发送查询信息
	Dom.async=false //设置为同步方式获取数据
	//alert(Http.responseText);
	
	//从服务器端传回的xml信息中，获取数据
	Dom.loadXML(Http.responseText);
	Item = Dom.getElementsByTagName("item");
	itemID = Dom.getElementsByTagName("id");
	itemName = Dom.getElementsByTagName("name");
	itemParent = Dom.getElementsByTagName("parent");
	
	//alert("获取: "+Item.length+"个新的对象");
	
	for(key=0;key<Item.length;key++)//装载新获取的数据到下级菜单
	{
		index=key+1;
		//alert(itemID[key].text+itemName[key].text+"("+key+":"+Item.length+")");
		tempoption=new Option(itemName[key].text,itemID[key].text);
        Select.options[index]=tempoption;
		Select.options[index].parent=itemParent[key].text;
		Select.options[index].table=Table;
		Select.options[index].value=itemID[key].text;
	}
}

/*

函数 Initialize

菜单的初始化
可以一次初始化多个菜单，用数组将联动菜单的第一级菜单 的name，以及所在form传递给本函数。
参数说明：
Menus	需要初始化的菜单（数组，元素为完整的表单对象）；
Table	服务器短 数据库里对应的表（字符串）。

Initialize函数 访问服务器的数据库，到由 Table 参数所指定的数据表里 获取数据，装载到 数组参数 P 所指定的各个菜单里。
*/
function Initialize(Menus,Table,selectedValue)//初始化第一个关联菜单
{
	var url=ServerURL+"?table="+Table+"&parent=0";
	document.write("<br>"+url);
	
	var Http = new ActiveXObject("Microsoft.XMLHTTP");//创建xmlhttp对象，用于收发数据到服务器短
	var Dom = new ActiveXObject("Microsoft.XMLDOM");//创建xmldom对象，用于分析、获取服务器段传回的xml中的数据
	
	Http.open("GET",url,false);
	Http.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");//如果需要 get/post 中文参数到服务器，必须出现次行，否则服务器端出现编码错误。
	Http.send();//发送查询信息
	Dom.async=false //设置为同步方式获取数据
	
	Dom.loadXML(Http.responseText);
	Item = Dom.getElementsByTagName("item");
	itemID = Dom.getElementsByTagName("id");
	itemName = Dom.getElementsByTagName("name");
	itemParent = Dom.getElementsByTagName("parent");	
	//document.write("<br>"+"对象:"+Item.length+" name节点:"+itemName.length+" id节点:"+itemID+" parent节点:"+itemParent.length);
	
	for(var key=0;key<Item.length;key++)//装载新获取的数据到下级菜单
	{	
		index=key+1;	
		for(var menu in Menus)
		{
			tempoption=new Option(itemName[key].text,itemID[key].text);
			Menus[menu].options[index]=tempoption;
			Menus[menu].options[index].parent=itemParent[key].text;
			Menus[menu].options[index].table=Table;
			Menus[menu].options[index].value=itemID[key].text;
			
			if( selectedValue>0 && selectedValue == itemID[key].text )
				Menus[menu].options[index].selected=true
		}
	}
}

function InitMore(Menus,values,DB_table_name)
{
	// 初始化第一個菜單
	Initialize(new Array(Menus[0]),DB_table_name,values[0])
	
	// 循環初始化 以後的菜單
	for(idx=1;idx<Menus.length;idx++)
	{
		// 裝載菜單
		getOption(Menus[idx-1],new Array(Menus[idx]))
		// 默認項
		setSelected(Menus[idx],values[idx])
	}
}